<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM设计</title>
    <script>
        // 模拟的Model
        let msg = "Hello MVVM";
        window.onload=function(){
            // 用于显示模拟的Model的数据
            let s1 = document.getElementById("s1");
            // 模拟的View
            let inText = document.getElementById("inText");
            s1.innerHTML = msg;
            inText.value = msg;

            // 监听input元素,当用户输入数据之后,触发事件
            inText.oninput = function(){
                // 将用户输入的数据赋值给msg
                msg = this.value;
                s1.innerHTML = msg;
            }
        }
    </script>
</head>
<body>
<div>
    <input type="text" id="inText"><br/>
    <span id="s1"></span>
</div>
</body>
</html>